<template>
    <view class="container">
        <div class="top">
            <!-- 搜索框 -->
            <view class="search-header">
                <view class="search-bar">
                    <uni-icons type="search" size="20" class="search-icon"></uni-icons>
                    <input v-model="keywords" placeholder-style="color:#ccc" confirm-type="search"
                        @confirm="searchConfirm" class="search-input" placeholder="请选择需要救援的项目" />
                </view>
            </view>

            <!-- 我的项目标题 -->
            <view class="section-title">我的项目({{ total }})</view>
        </div>

        <!-- 项目列表 -->
        <scroll-view scroll-y class="project-list">
            <view @click="selectItem(item)" v-for="(item, idx) in projects" :key="item.buildingId"
                :class="['project-item', item.buildingId == selected ? 'project-item-hover' : '']">
                <view class="project-title">
                    <text class="project-bold">
                        <block v-for="(part, i) in getHighlightParts(item.buildingName)" :key="i">
                            <text v-if="part.highlight" class="highlight-keyword">{{ part.text }}</text>
                            <text v-else>{{ part.text }}</text>
                        </block>
                    </text>
                </view>
                <view class="project-address">{{ item.address }}</view>
            </view>
            <view v-if="!finished" class="loading-text">{{ loading ? '加载中...' : '' }}</view>
            <view v-if="finished && projects.length > 0" class="finished-text">没有更多了</view>
        </scroll-view>

        <!-- 下一步按钮 -->
        <view class="footer">
            <button @click="toCreate" :class="['next-btn', selected > 0 ? '' : 'disabled']" :disabled="selected > 0 ? false : true">下一步</button>
        </view>
    </view>
</template>

<script>
import { getPersonalBuildingList } from '@/apis/elevator.js';
export default {
	data() {
		return {
			selected: '',
			keywords: '',
			searchKeyword: '',
			projects: [

			],
			total: 0,
			pageNum: 1,
			pageSize: 20,
			loading: false,
			finished: false
		};
	},
	onLoad() {
		uni.showLoading({
			title: '加载中',
		});
		this.getList(true);
	},
	onReachBottom() {
		console.log(111);
		this.loadMore();
	},
	methods: {
		toCreate() {
			uni.redirectTo({
				url:'/subpages/rescue/create?buildingId=' + this.selected,
			});
		},
		searchConfirm(res) {
			uni.showLoading({
				title: '加载中',
			});
			const value = res.detail.value;
			this.keywords = value;
			this.searchKeyword = value;
			this.pageNum = 1;
			this.finished = false;
			this.getList(true);
		},
		selectItem(item) {
			this.selected = item.buildingId;
		},
		getList(reset = false) {
			if (this.loading || this.finished) return;
			this.loading = true;
			getPersonalBuildingList({
				buildingName: this.keywords,
				current: this.pageNum,
				size: this.pageSize
			}).then(res => {
				const records = res.data.records || [];
				this.total = res.data.total;
				if (reset) {
					this.projects = records;
					uni.hideLoading();
				} else {
					this.projects = this.projects.concat(records);
				}
				if (records.length < this.pageSize) {
					this.finished = true;
				} else {
					this.pageNum += 1;
				}
			}).finally(() => {
				this.loading = false;
			});
		},
		loadMore() {
			if (!this.loading && !this.finished) {
				this.getList();
			}
		},
		getHighlightParts(name) {
			if (!this.searchKeyword) return [{ text: name, highlight: false }];
			const escaped = this.searchKeyword.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&');
			const reg = new RegExp(escaped, 'gi');
			let result = [];
			let lastIndex = 0;
			let match;
			while ((match = reg.exec(name)) !== null) {
				if (match.index > lastIndex) {
					result.push({ text: name.slice(lastIndex, match.index), highlight: false });
				}
				result.push({ text: match[0], highlight: true });
				lastIndex = reg.lastIndex;
			}
			if (lastIndex < name.length) {
				result.push({ text: name.slice(lastIndex), highlight: false });
			}
			return result;
		}
	}
};
</script>

<style scoped>
.container {
    background: #F3F6F8;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.top {
    width: 100%;
    background: #F3F6F8;
    position: sticky;
    top: 0;
    z-index: 9;
}

.search-header {
    width: 100%;
    background-color: #fff;
    padding: 16rpx 0px;
    height: 72rpx;
}

.search-bar {
    background: #F6F6F6;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    height: 72rpx;
    margin-left: 20rpx;
    width: calc(100% - 40rpx);
    display: flex;
    align-items: center;
    position: relative;
}

.search-icon {
    font-size: 20rpx;
    color: #999;
    margin-right: 8rpx;
    margin-left: 10rpx;
}

.search-input {
    flex: 1;
    border: none;
    font-size: 28rpx;
    /* background-color: red; */
}

.section-title {
    font-size: 24rpx;
    color: #999;
    background-color: #fff;
    padding: 30rpx 0 4rpx 40rpx;
    margin-top: 20rpx;
}

.project-list {
    flex: 1;
    overflow: auto;
}

.project-item {
    width: calc(100% - 80rpx);
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 2rpx;
    padding: 32rpx 40rpx;
    color: #333;
    transition: .3s all;
}

.project-item-hover {
    background: #F5FBFF;
}

.project-title {
    font-size: 28rpx;
    font-weight: 500;
}

.project-bold {
    font-weight: bold;
}

.project-address {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
}

.footer {
    padding: 24rpx;
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.next-btn {
    width: 100%;
    height: 80rpx;
    background: #f2f3f5;
    color: #fff;
    font-size: 32rpx;
    border-radius: 12rpx;
    border: none;
    background: #0091FF;
    transition: .3s all;
}

.disabled {
    background: #f2f3f5;
}

.loading-text {
    text-align: center;
    color: #999;
    font-size: 24rpx;
    padding: 24rpx 0;
    height: 30rpx;
}

.finished-text {
    text-align: center;
    color: #ccc;
    font-size: 24rpx;
    padding: 24rpx 0;
}

.highlight-keyword {
    color: #0091FF;
}
</style>
